<template>
  <div class="create-folder-button-content">
    <el-button
      v-if="roundFlag"
      type="success"
      :size="size"
      @click="createFolderDialogVisible = true"
    >
      <i class="el-icon-folder-add el-icon--right" /> 新建文件夹
    </el-button>
    <el-button
      v-if="circleFlag"
      type="success"
      :size="size"
      circle
      @click="createFolderDialogVisible = true"
    >
      <i class="el-icon-folder-add" />
    </el-button>
    <el-dialog
      title="新建文件夹"
      :visible.sync="createFolderDialogVisible"
      width="30%"
      @opened="focusInput('folderName')"
      @closed="resetForm('createFolderForm')"
      :append-to-body="true"
      :modal-append-to-body="false"
      :center="true"
    >
      <div>
        <el-form
          label-width="100px"
          :rules="createFolderRules"
          ref="createFolderForm"
          :model="createFolderForm"
          status-icon
          @submit.native.prevent
        >
          <el-form-item label="文件夹名称" prop="folderName">
            <el-input
              type="text"
              ref="folderName"
              @keyup.enter.native="doCreateFolder"
              v-model="createFolderForm.folderName"
              autocomplete="off"
            />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="createFolderDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="doCreateFolder" :loading="loading"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import fileService from "../../../api/file";
import { mapActions, mapGetters } from "vuex";

export default {
  name: "CreateFolder",
  components: {},
  props: {
    roundFlag: Boolean,
    circleFlag: Boolean,
    size: String,
  },
  data() {
    return {
      createFolderDialogVisible: false,
      createFolderRules: {
        folderName: [
          { required: true, message: "请输入文件夹名称", trigger: "blur" },
        ],
      },
      createFolderForm: {
        folderName: "",
      },
      loading: false,
    };
  },
  methods: {
    ...mapActions({
      reloadFileList: "file/loadFileList",
    }),
    focusInput(refName) {
      this.$refs[refName].focus();
    },
    resetForm(refName) {
      this.$refs[refName].resetFields();
    },
    doCreateFolder() {
      let _this = this;
      _this.$refs.createFolderForm.validate((valid) => {
        if (valid) {
          _this.loading = true;
          fileService.createFolder(
            {
              parentId: _this.parentId,
              folderName: _this.createFolderForm.folderName,
            },
            (res) => {
              _this.loading = false;
              _this.createFolderDialogVisible = false;
              _this.$message.success("新建成功");
              _this.reloadFileList();
            },
            (res) => {
              _this.$message.error(res.message);
              _this.loading = false;
            }
          );
        }
      });
    },
  },
  computed: {
    ...mapGetters(["parentId"]),
  },
  mounted() {},
  watch: {},
};
</script>

<style>
.create-folder-button-content {
  display: inline-block;
  margin-right: 10px;
}
</style>
